<template>
  <div style="width: 100%;text-align: center">
    <div style="text-align: center;height: 100px">
      <el-form :inline="true" :model="productRequest" class="demo-form-inline">
        <el-form-item>
          <el-input v-model="productRequest.allName" style="width: 500px;"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchProduct">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div style="float: left; width: 20%;border: solid #fff">
    </div>
    <div v-if="typeListVisible">
      <div style="float: left; width: 20%;">
        <el-button v-for="type in typeList" style="width: 100%;background-color: #999;height: 50px" @click="getTypeListFo(type)">
          {{type.typeName}}
        </el-button>
      </div>
      <div style="float: left; width: 40%;background-color: #7171C6;height: 249px" >
        <span v-for="type in typeValue">
          {{type.typeName}}:
          <span v-for="type2 in type.children" @click="getModuleMap(type2)">
            {{type2.typeName}}
          </span>
          <br>
          <br>
        </span>
      </div>
    </div>
    <div v-if="moduleVisible">
      <div style="float: left; width: 60%;">
        <div style="height:50px; width: 100%;border: solid #97a8be" v-if="brandVisible">
          <div style="float: left;background-color: #97a8be;width: 20%;height: 42px">
            品牌
            <br>
            <br>
          </div>
          <div v-for="brand in brands" style="float: left;width: 100px;height: 40px" @click="setProductBrand(brand.brandId)">
            <img :src="brand.brandLogo">
          </div>
        </div>
        <div v-for="(attr,index) in this.attrValues" style="height:50px; width: 100%;border: solid #97a8be">
          <div style="float: left;background-color: #97a8be;width: 20%;height: 42px">
            {{attr.key}}
            <br>
            <br>
          </div>
          <div v-for="(value) in attr.values" style="float: left;width: 100px;height: 40px" @click="setProductAttr(value,index)">
            {{value}}
          </div>
        </div>
      </div>
    </div>
    <div>
      <template>
        <el-table :data="listProductInfo.list" style="width: 100%">
          <el-table-column prop="productName" label="商品名称" width="180">
            <template slot-scope="scope">
              <span v-html="scope.row.productName"></span>
            </template>
          </el-table-column>
          <el-table-column prop="productMasterMap" label="商品主图" width="180">
            <template slot-scope="scope">
              <image-preview :src="scope.row.productMasterMap"></image-preview>
            </template>
          </el-table-column>
          <el-table-column prop="productSlideshow" label="商品轮播图">
            <template slot-scope="scope">
              <image-preview :src="scope.row.productSlideshow"></image-preview>
            </template>
          </el-table-column>
          <el-table-column prop="productDescriber" label="商品描述">
          </el-table-column>
          <el-table-column prop="productUnit" label="商品单位">
          </el-table-column>
          <el-table-column prop="brandName" label="品牌名称">
          </el-table-column>
          <el-table-column prop="typeName" label="类型名称">
          </el-table-column>
          <el-table-column prop="productSales" label="商品销量">
          </el-table-column>
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button type="primary" @click="getProductDetails(scope.row.productId)">购买</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <div class="block">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="productRequest.numPage"
          :page-sizes="[1, 2, 3, 4]"
          :page-size="productRequest.sizePage"
          layout="total, sizes, prev, pager, next, jumper"
          :total="listProductInfo.total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>

import { listType, getModuleMap } from '@/api/product/type'
import { productInfoList } from '@/api/product/productInfo'

export default {
  name: 'Index',
  data() {
    return {
      brandVisible: true,
      typeListVisible: true,
      moduleVisible: false,
      typeList: [],
      name: null,
      typeValue: [],
      listProductInfo: {
        total: 0,
        list: []
      },
      productRequest: {
        brandId: '',
        allName: '',
        numPage: 1,
        sizePage: 3
      },
      attrValues: [],
      brands: []
    }
  },
  created() {
    this.getTypeList()
    this.searchProduct()
  },
  methods: {
    getProductDetails(productId){
      this.$router.push({ path: '/product/productInfo/index', query: {productId : productId}})
    },
    getTypeListFo(type) {
      this.typeValue = type.children;
    },
    getTypeList() {
      listType().then(response => {
        this.typeList = this.handleTree(response.data, "typeId", "parentId");
        this.typeValue = this.typeList[0].children;
      })
    },
    searchProduct() {
      // this.$router.push({ path: '/product/productInfo/index', query: {allName : name}})
      productInfoList(this.productRequest).then(response => {
        this.listProductInfo = response.data
      })
    },
    getModuleMap(type) {
      this.typeListVisible = false;
      this.moduleVisible = true;
      getModuleMap(type.typeId).then(response => {
        this.brands = response.data.brands;
        this.attrValues = JSON.parse(response.data.productRule.rultAttr);
      })
      this.productRequest.allName = type.typeName;
      this.searchProduct();
    },
    handleCurrentChange(value) {
      this.productRequest.numPage = value;
      this.searchProduct()
    },
    setProductBrand(brandId) {
      this.productRequest.brandId = brandId;
      this.searchProduct;
      this.brandVisible = false;
    },
    setProductAttr(value,index) {
      let attrList = [];
      this.attrValues.forEach((attr,ind) => {
        if (ind != index) {
          attrList.push(attr);
        }
      })
      this.attrValues = attrList;
    }
  }
}
</script>

<style scoped>

</style>
